import { useRef } from 'react'

function App() {
  // 场景：在 React 中进行 DOM 操作时，用来获取 DOM
  // 作用：返回一个带有 current 属性的可变对象，通过该对象可以进行 DOM 操作
  // 返回值：包含 current 属性的对象

  // 注意：只要在 React 中进行 DOM 操作，都可以通过 useRef Hook 来获取 DOM
  // 注意：对于获取文本框的值来说，推荐使用受控组件方式来获取，这样更符合 React 库的定位，避免直接操作 DOM

  // 在获取 DOM 时，一般初始值设置为 null
  // 泛型函数的类型变量 HTMLInputElement：指定要获取的 DOM 元素的类型，在进行 DOM 操作时，才有类型提示

  const inputRef = useRef<HTMLInputElement>(null)

  const onChange = () => {
    console.log(inputRef.current?.value)
  }

  return (
    <div>
      <h4>useRef</h4>
      <input type="text" ref={inputRef} onChange={onChange} />
    </div>
  )
}

export default App
